<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useMemberStore from "../../store/memberStore";
import Dialog from "./dialog.vue";
import { userIndex } from "@/api/memberApi";
const memberStore = useMemberStore();
const tableData = ref([]);
onBeforeMount(() => {
  // 获取会员数据
});

const dialog = ref(null);

const getData = async () => {
  const res = await userIndex();
  tableData.value = res.msg.data;
};
getData();
// 修改页码
function changePage(page) {}
// 修改条数
function changeSize(size) {}

// 编辑
function editMember(member) {
  // console.log(member,'编辑')

  // 打开对话框
  memberStore.openDialog();
}
</script>

<template>
  <el-card>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商城管理</el-breadcrumb-item>
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格 -->
    <el-table :data="tableData" width="100%" max-height="400">
      <el-table-column label="ID" prop="id" width="80" fixed> </el-table-column>
      <el-table-column label="手机号" prop="mobile" width="200">
      </el-table-column>
      <el-table-column label="昵称" prop="nickname" width="200">
      </el-table-column>
      <el-table-column label="账号状态" prop="state" width="200">
        <template v-slot="props">
          <el-tag type="success" size="small" v-if="props.row.state === 1"
            >启用</el-tag
          >
          <el-tag type="danger" size="small" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="150">
        <template v-slot="prop">
          <el-button
            @click="editMember(prop.row)"
            type="primary"
            size="small"
            round
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="memberStore.total"
      :current-page="memberStore.page"
      :page-size="memberStore.size"
      :page-sizes="[1, 5, 10, 20, 50, 100]"
      @size-change="changeSize"
      @current-change="changePage"
    /> -->
  </el-card>
  <!-- 对话框 -->
  <Dialog ref="dialog" />
</template>

<style lang="scss" scoped>
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-pagination {
  margin: 20px auto;
}
</style>
